* {
  margin: 0;
  padding: 0;
}

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #f1f1f1;
  background-image: linear-gradient(45deg, #d5d5d5 25%, transparent 25%, transparent 75%, #d5d5d5 75%), linear-gradient(45deg, #d5d5d5 25%, transparent 25%, transparent 75%, #d5d5d5 75%);
  background-size: 4px 2px;
  background-position: 0 0, 2px 1px;
  box-shadow: inset 0 0 300px rgba(0, 0, 0, 0.3);
}
.outer .middle {
  display: table-cell;
  vertical-align: middle;
}
.outer .middle .inner {
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-image: linear-gradient(#f1f1f1, #d5d5d5);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), inset 0 1px white;
}
.outer .middle .inner .btn1 {
  position: relative;
  top: 10px;
  left: 10px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-image: linear-gradient(#d5d5d5, #f1f1f1);
  box-shadow: inset 0 -1px white;
}
.outer .middle .inner .btn1 .btn-pulse {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 160px;
  width: 160px;
  border-radius: 50%;
  background-image: linear-gradient(#4dc2f3, #3276a4);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.outer .middle .inner .btn1 .btn-pulse .pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  list-style: none;
  animation: rot 0.8s linear infinite alternate;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li {
  position: absolute;
  top: -2.5px;
  left: -5px;
  display: block;
  width: 10px;
  height: 3px;
  background: #adffff;
  border-radius: 50%;
  box-shadow: 0 0 5px 3px #8df2f3;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(1) {
  transform: rotateZ(22.5deg) translateY(-75px);
  opacity: 0.125;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(2) {
  transform: rotateZ(33.75deg) translateY(-75px);
  opacity: 0.25;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(3) {
  transform: rotateZ(45deg) translateY(-75px);
  opacity: 0.375;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(4) {
  transform: rotateZ(56.25deg) translateY(-75px);
  opacity: 0.5;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(5) {
  transform: rotateZ(67.5deg) translateY(-75px);
  opacity: 0.625;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(6) {
  transform: rotateZ(78.75deg) translateY(-75px);
  opacity: 0.75;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(7) {
  transform: rotateZ(90deg) translateY(-75px);
  opacity: 0.875;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(8) {
  transform: rotateZ(101.25deg) translateY(-75px);
  opacity: 0;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(9) {
  transform: rotateZ(112.5deg) translateY(-75px);
  opacity: 0.125;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(10) {
  transform: rotateZ(123.75deg) translateY(-75px);
  opacity: 0.25;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(11) {
  transform: rotateZ(135deg) translateY(-75px);
  opacity: 0.375;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(12) {
  transform: rotateZ(146.25deg) translateY(-75px);
  opacity: 0.5;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(13) {
  transform: rotateZ(157.5deg) translateY(-75px);
  opacity: 0.625;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(14) {
  transform: rotateZ(168.75deg) translateY(-75px);
  opacity: 0.75;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(15) {
  transform: rotateZ(180deg) translateY(-75px);
  opacity: 0.875;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(16) {
  transform: rotateZ(191.25deg) translateY(-75px);
  opacity: 0;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(17) {
  transform: rotateZ(202.5deg) translateY(-75px);
  opacity: 0.125;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(18) {
  transform: rotateZ(213.75deg) translateY(-75px);
  opacity: 0.25;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(19) {
  transform: rotateZ(225deg) translateY(-75px);
  opacity: 0.375;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(20) {
  transform: rotateZ(236.25deg) translateY(-75px);
  opacity: 0.5;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(21) {
  transform: rotateZ(247.5deg) translateY(-75px);
  opacity: 0.625;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(22) {
  transform: rotateZ(258.75deg) translateY(-75px);
  opacity: 0.75;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(23) {
  transform: rotateZ(270deg) translateY(-75px);
  opacity: 0.875;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(24) {
  transform: rotateZ(281.25deg) translateY(-75px);
  opacity: 0;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(25) {
  transform: rotateZ(292.5deg) translateY(-75px);
  opacity: 0.125;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(26) {
  transform: rotateZ(303.75deg) translateY(-75px);
  opacity: 0.25;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(27) {
  transform: rotateZ(315deg) translateY(-75px);
  opacity: 0.375;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(28) {
  transform: rotateZ(326.25deg) translateY(-75px);
  opacity: 0.5;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(29) {
  transform: rotateZ(337.5deg) translateY(-75px);
  opacity: 0.625;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(30) {
  transform: rotateZ(348.75deg) translateY(-75px);
  opacity: 0.75;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(31) {
  transform: rotateZ(360deg) translateY(-75px);
  opacity: 0.875;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(32) {
  transform: rotateZ(371.25deg) translateY(-75px);
  opacity: 0;
}
.outer .middle .inner .btn1 .btn-pulse .pulse li:nth-child(33) {
  transform: rotateZ(382.5deg) translateY(-75px);
  opacity: 0.125;
}
.outer .middle .inner .btn1 .btn-pulse .btn3 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background-image: linear-gradient(#f1f1f1, #d5d5d5);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2), inset 0 1px white;
}
.outer .middle .inner .btn1 .btn-pulse .btn3 .btn4 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 120px;
  height: 120px;
  background: linear-gradient(#d5d5d5, #f1f1f1);
  border-radius: 50%;
  line-height: 120px;
  text-align: center;
}
.outer .middle .inner .btn1 .btn-pulse .btn3 .btn4 span {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
  color: #acacac;
  font-size: 35px;
}

@keyframes rot {
  0%, 12.5% {
    transform: rotateZ(0deg);
  }
  12.6%, 25% {
    transform: rotateZ(11.25deg);
  }
  25.1%, 37.5% {
    transform: rotateZ(22.5deg);
  }
  37.6%, 50% {
    transform: rotateZ(33.75deg);
  }
  50.1%, 62.5% {
    transform: rotateZ(45deg);
  }
  62.6%, 75% {
    transform: rotateZ(56.25deg);
  }
  75.1%, 87.5% {
    transform: rotateZ(67.5deg);
  }
  87.6% {
    text-replace: rotateZ(78.75deg);
  }
  87.7%, 100% {
    transform: rotateZ(90deg);
  }
}